<template>
  <div style="height:800px">
    <div class="container1">
      <!-- <div class="common-title-flex">
        <div class="common-title-div"></div>
      </div> -->
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="80px" style="margin-bottom: -10px; margin-top: 10px">
        <el-form-item label="时间选择">
          <el-date-picker v-model="searchObj.applyTime" unlink-panels align="right" type="datetimerange" value-format="yyyyMMddHHmmss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" icon="el-icon-search" @click="initDataList">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 公安综合指挥 -->
      <div v-if="typeCode=='police'" class="top-box-flex" style="margin:1rem 0">
        <div class='topbox top-box-block' style="background-color:#0079FE;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.disciplineCount}}</b></div>
          <div>违纪人员</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.onJobCount || 0}}</b></div>
          <div>在职人数</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#FF6418;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.leaveJobCount || 0}}</b></div>
          <div>离职人数</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#44AA55;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.onDormCount || 0}}</b></div>
          <div>在宿人数</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#2AAEBD;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.cloudCheckCount || 0}}</b></div>
          <div>云端巡查</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.enterpriseCount || 0}}</b></div>
          <div>企业数量</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.laborCount || 0}}</b></div>
          <div>劳务公司</div>
        </div>
      </div>
      <!-- 企业 -->
      <div v-if="typeCode=='business'" class="top-box-flex" style="margin:1rem 0">
        <div class='topbox1 top-box-block' style="background-color:#0079FE;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.waitCloudCheckTotalCount || 0}}</b></div>
          <div>待处理云端巡查任务</div>
        </div>
        <div class='topbox1 top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.majorCloudCheckCount || 0}}</b></div>
          <div>重点部位巡查</div>
        </div>
        <div class='topbox1 top-box-block' style="background-color:#FF6418;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.cheatCloudCheckCount || 0}}</b></div>
          <div>反诈宣传</div>
        </div>
        <div class='topbox1 top-box-block' style="background-color:#44AA55;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.updateCloudCheckCount || 0}}</b></div>
          <div>单位信息更新</div>
        </div>
        <div class='topbox1 top-box-block' style="background-color:#2AAEBD;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.abnormalCloudCheckCount || 0}}</b></div>
          <div>异常行为登记</div>
        </div>
      </div>
      <!-- 劳务公司 -->
      <div v-if="typeCode=='labour'" class="top-box-flex" style="margin:1rem 0">
        <div class='topbox2 top-box-block' style="background-color:#0079FE;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.laborConsultCount || 0}}</b></div>
          <div>劳动维权咨询</div>
        </div>
        <div class='topbox2 top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.waitLaborConsultCount || 0}}</b></div>
          <div>待处理劳动咨询数</div>
        </div>
      </div>
      <!-- 人社局 -->
      <div v-if="typeCode=='society'" class="top-box-flex" style="margin:1rem 0">
        <div class='topbox2 top-box-block' style="background-color:#0079FE;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.jobFairCount || 0}}</b></div>
          <div>招聘会数量</div>
        </div>
        <div class='topbox2 top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.waitSocietyLaborConsultCount || 0}}</b></div>
          <div>待处理劳动咨询微服务数量</div>
        </div>
      </div>
      <div class="container2">
        <div style="width:48%;height:750px">
          <div class="common-body-shadow">
            <div class="common-title-flex">
              <div class="common-title-div"></div>
              <div class="common-title-text">心园通人数</div>
              <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
              </el-date-picker>
              <el-button size="mini" style="margin-left:10px" type="primary" icon="el-icon-search" @click="initDataList2">查询</el-button>
              <div id="main" style="width:100vw;height:300px;"></div>
            </div>
            <!-- <div id="main" style="width:100%;height:350px;background-color:#fff"></div> -->
          </div>
          <div class="common-body-shadow">
            <div class="common-title-flex" style="margin-top:10px;">
              <div class="common-title-div"></div>
              <div class="common-title-text" style="width:90px;padding-right:0">云端巡查任务</div>
              <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
              </el-date-picker>
              <el-button size="mini" style="width:72px;height:32px;margin-left:10px" type="primary" icon="el-icon-search" @click="initDataList3">查询</el-button>
              <div style="margin-top:10px;margin-left:20px;font-size:14px;color:#aaa">最新数字<b style="font-size:20px;margin:0 5px;color: #000;">8888</b>个任务</div>
              <div id="main2" class="echartsStyle"></div>
            </div>
            <!-- <div id="main" style="width:100%;height:350px;background-color:#fff"></div> -->
          </div>
        </div>
        <div class="common-body-shadow2">
          <div class="common-title-flex" style="position:relative">
            <div class="common-title-div"></div>
            <div class="common-title-text" style="width:90px;">人员地区分布</div>
            <div style="position:absolute;right:10px">
              <el-button type='size' size="mini" icon="el-icon-upload2">导出</el-button>
              <el-button type='primary' size="mini" icon="el-icon-plus">添加</el-button>
            </div>
          </div>
          <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px;" max-height="700" border>
            <el-table-column prop="name" label="新港开发区网格" width="150" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="identity" label="违纪人员" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                {{ identity[scope.row.identity] }}
              </template>
            </el-table-column>
            <el-table-column prop="jobNumber" label="在职人数" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="department" label="云端巡查" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="leader" label="企业数量" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="leader" label="劳务公司" show-overflow-tooltip align="center">
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row type="flex" justify="end">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="prev, pager, next, jumper" :total="total">
            </el-pagination>
          </el-row>
        </div>

      </div>
    </div>

    <!-- <el-image style="width: 100%; height: 100%" :src="url" fit="fill"></el-image> -->
    <!-- <el-image style="width: 30%; height: 20%" class="text_image" :src="texturl" fit="fill"></el-image> -->
  </div>
</template>

<script>
import Schart from "vue-schart";
import echarts from "echarts";
import bus from "../common/bus";
import mixin from "@/mixin/mixin.js";
import ElementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "dashboard",
  mixins: [mixin],
  data() {
    return {
      divwidth: "",
      divheight: "",
      topObj: "",
      tableData: [],
      failList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      selectList: [],
      url: require("../../assets/img/公司.gif"),
      // texturl:require('../../assets/img/minjing1.png'),
      valuename: "",
      loading: false,
      name: localStorage.getItem("ms_username"),
      // Echarts: null,
      searchObj: {
        applyTime: "",
      },
      value2: "",
      twChart:null,
      myChart:null
    };
  },
  components: {
    Schart,
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  created() {
    // let userinfo = JSON.parse(localStorage.getItem("userinfo"));
    // let typeCode = userinfo.typeCode;
    // if (typeCode == "police") {
    //   this.url = require("../../assets/img/公安.gif");
    // } else if (typeCode == "business") {
    //   this.url = require("../../assets/img/公司.gif");
    // } else if (typeCode == "labour") {
    //   this.url = require("../../assets/img/劳务公司.gif");
    // } else {
    //   this.url = require("../../assets/img/人社局.gif");
    // }
    // this.uploadHeader.Authorization = this.requestToken;
    this.initDataList();
  },
  activated() {
    // console.log(1)
    // this.handleListener();
  },
  deactivated() {
    // window.removeEventListener("resize", this.renderChart);
    bus.$off("collapse", this.handleBus);
  },
  methods: {
    //查询
    initDataList1() {},
    initDataList2() {},
    initDataList3() {},
    initDataList() {
      let self = this;
      let params = {
        beginTime: self.searchObj.applyTime ? self.searchObj.applyTime[0] : "",
        endTime: self.searchObj.applyTime ? self.searchObj.applyTime[1] : "",
      };
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: "/index/queryHeadMateSpace",
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
          params: params,
        })
        .then((res) => {
          self.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.topObj = res.data.data;
          } else {
            this.tableData = [];
            this.total = 0;
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({ message: err, type: "error" });
        });
    },
    reset() {},
    testImage() {
      this.loading = true;
      let test = this.Echarts.getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });
      this.valuename = this.dataURLtoFile(test, "testpng");

      let params = {
        image1: this.valuename,
      };
      this.$nextTick(() => {
        this.axiosMethod(params);
      });
    },
    axiosMethod(params) {
      console.log("-------", this.valuename);
      var formData = new FormData();
      formData.append("image1", this.valuename);
      this.$axios({
        headers: { "Content-Type": "multipart/form-data" },
        url: "/word/test",
        method: "post",
        data: formData,
        // params:params
      })
        .then((res) => {
          this.loading = false;
          console.log("res-----", res);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    dataURLtoFile(dataurl, filename) {
      //将base64转换为文件
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    // showEcharts() {
    //   this.Echarts = echarts.init(document.getElementById("pieChart"));
    //   this.Echarts.setOption(this.option3);
    // },
    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`;
      });
    },
    handleListener() {
      bus.$on("chartResize", this.handleBus);
      // 调用renderChart方法对图表进行重新渲染
      // window.addEventListener("resize", this.renderChart);
    },
    handleBus(msg) {
      setTimeout(() => {
        // this.renderChart();
        this.myChart.resize();
        this.twChart.resize();
      }, 300);
    },
    // renderChart() {
    //   this.$refs.bar.renderChart();
    //   this.$refs.line.renderChart();
    // }
    //公安线状图
    showEcharts() {
      this.twChart = echarts.init(document.getElementById("main"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: 20,
          top: 20,
          // padding: [0, 20, 0, 0],
          data: ["注册", "入职"],
        },
        grid: {
          top: "18%",
          left: "5%",
          right: "5%",
          bottom: "20%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: "注册",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#FEC169",

                lineStyle: {
                  color: "#FEC169",
                },
              },
            },
            areaStyle: {
              color: "#FFEACD",
            },
          },
          {
            name: "入职",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#7DBBFF",
                lineStyle: {
                  color: "#7DBBFF",
                },
              },
            },
            areaStyle: {
              color: "#D2E7FF",
            },
          },
        ],
      };
      this.twChart.setOption(option);
      // var twChart = echarts.init(document.getElementById("main"));
      // this.twChart = twChart;
      // twChart.setOption(option);
      let that=this;
      setTimeout(function () {
        window.onresize = function () {
          that.twChart.resize();
        };
      }, 200);
    },
    // 公安柱状图
    gonganecharts() {
      var myChart = echarts.init(document.getElementById("main2"));
      var option = {
        xAxis: {
          type: "category",
          data: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
          ],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "3%",
          bottom: "25%",
          containLabel: true,
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110],
            type: "bar",
            showBackground: true,
            barWidth: 15,
            itemStyle: {
              normal: {
                //这里是重点
                color: "#50A3FF",
                barBorderRadius: 15,
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#888",
                    fontSize: 10,
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      this.myChart = myChart;
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    // 取消点击
    handleClose() {
      this.cancel();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.initDataList();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initDataList();
    },
    //  重置
    reset() {
      this.searchObj = {
        name: "",
        company: "",
        phone: "",
      };
      this.initDataList();
    },
  },
  mounted() {
     bus.$on("chartResize", this.handleBus);
    this.$nextTick(function () {
      this.showEcharts();
      this.gonganecharts();
    });
    this.$bus.$on("tocenter", (age) => {
      // 要做的事
      console.log(age);
    });
  },
  watch: {
    // this.leftopen(val,old){
    //   setTimeout(re=>{
    //     let myChart = echarts.init(document.getElementById(main));
    //     // myChart.resize() //echarts得重绘方法
    //   },300)
    // }
  },
};
</script>
<style scoped>
.text_image {
  position: absolute;
  z-index: 10;
  top: 10%;
  right: 2%;
}
.first-page {
  text-shadow: 0 0 10px #462424;
  color: white;
  font-size: 20px;
  font-weight: bold;
  /* position: relative;
  width:100%;
  height:100%;
  background-image: url(../../assets/img/laowugong.jpeg);
  background-size: 100%;
  background-repeat:no-repeat;
  background-size: cover; */
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 8px;
  margin-left: 10px;
}
.common-title-flex {
  width: 100%;
  display: flex;
  /* margin-top: 10px; */
  padding-top: 10px;
  flex-wrap: wrap;
}
.common-title-text {
  width: 70px;
  padding-left: 4px;
  font-size: 14px;
  line-height: 32px;
  padding-right: 20px;
  font-weight: bold;
}
.common-body-shadow {
  width: 100%;
  height: 330px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #d1d1d1;
}
.common-body-shadow2 {
  width: 48%;
  height: 610px;
  background-color: #fff;
  box-shadow: 0px 0px 5px #d1d1d1;
  border-radius: 5px;
}
.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 15rem;
}
.topbox {
  width: 13%;
  height: 70px;
  background-color: aqua;
  border-radius: 3px;
}
.topbox1 {
  width: 18%;
  height: 70px;
  background-color: aqua;
  border-radius: 3px;
}
.topbox2 {
  width: 48%;
  height: 70px;
  background-color: aqua;
  border-radius: 3px;
}
.top-box-flex {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #fff;
  flex-wrap: wrap;
  margin-top: 10px;
}
.top-box-block {
  display: block;
  text-align: center;
}
.container2 {
  display: flex;
  justify-content: space-around;
}
.echartsStyle {
  width: 95%;
  height: 300px;
}
</style>
